<script setup>
import {ref} from "vue";

let message = ref("")
let num = ref(null)
let trimtext = ref("")

</script>

<template>
<!--html 元素会自动删除空格-->
  <h2>            Hello, World! </h2>
  <h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;            Hello, World! </h2>
  <label for="keyword">
    请输入要搜索的关键词
    <input type="text" name="keyword" id="keyword" v-model.lazy="message">
  </label>
  <h2>{{ message }}</h2>

  <label for="num">
    请输入数字
    <input type="text" name="num" id="num" v-model.number="num">
  </label>
  <h2>{{ num }}</h2>

  <label for="trim">
    请输入内容
    <input type="text" name="trim" id="num" v-model.trim="trimtext">
  </label>
  <h2>{{ trimtext }}</h2>
</template>

<style scoped>

</style>